<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{ title }}</text>
		</view>

		<view>{{ number + 1 }}</view>
		<view>{{ { ok: 'YES', no: 'NO' }.ok }}</view>
		<view>{{ message.split('').reverse().join('') }}</view>

		<view v-for="item in arr" :key="item.id" style="color: #FF0000; margin: 2px 0;">
			{{ JSON.stringify(item) }}
		</view>

		<view v-for="(item, index) in 6" :key="index" :class="index % 2 === 0 ? 'even-item' : 'odd-item'"
			style="margin: 4px 0;">
			{{ index + 2 }}
		</view>

		<view v-for="(value, name, index) in object">
			{{ index }}---{{ name }}---{{ value }}
		</view>

		<view v-for="item in arr" :key="item.id" style="margin: 2px 0;">
			{{ item.id }}:{{ item.name }}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				number: 1,
				message: 'Hello Vue!',
				arr: [{
						id: 1,
						name: 'uni-app'
					},
					{
						id: 2,
						name: 'HTML'
					},
					{
						id: 3,
						name: 'wechat'
					},
					{
						id: 4,
						name: 'Android'
					}
				],
				object: {
					title: 'How to do lists in Vue',
					author: 'Jane Doe',
					publishedAt: '2020-04-10'
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
	}

	.logo {
		width: 120px;
		height: 120px;
		margin-bottom: 10px;
	}

	.title {
		font-size: 24px;
		margin: 10px 0;
		color: black;
	}
	
	.even-item {
	  color: #007AFF; 
	  font-size: 16px;
	}
	
	.odd-item {
	  color: black; 
	  font-size: 16px;
	}
</style>